<script setup>
	import { ref } from 'vue'
	import { logisticsApi } from '@/services/patient.js'
	import { mapListApi } from '@/services/address.js'
	let top = 0
	// #ifdef MP-WEIXIN
	const menuButton = uni.getMenuButtonBoundingClientRect()
	top = menuButton.top - (50 - menuButton.height) / 2 + 'px'
	// #endif
	// 地图中心点
	const center = ref({})
	const props = defineProps({
		orderId: {
			default: 0,
		},
	})
	// 起点终点标记
	const markers = ref([])
	// 地图路线
	const polyline = ref([])
	// 当前位置
	const logisticsInfo = ref({})
	// 查看物流信息
	async function getLogistics() {
		// 调用接口
		const { code, data, message } = await logisticsApi(props.orderId)
		// 判断接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)
		// 渲染数据
		logisticsInfo.value = data
		// 起始点坐标
		const from = data.logisticsInfo[0]
		// 终止点坐标
		const to = data.logisticsInfo[data.logisticsInfo.length - 1]
		// 线路标记点，起点、终点
		markers.value = [
			{
				id: 1,
				latitude: from.latitude,
				longitude: from.longitude,
				iconPath: '/static/images/start.png',
				width: 25,
				height: 30,
			},
			{
				id: 2,
				latitude: to.latitude,
				longitude: to.longitude,
				iconPath: '/static/images/end.png',
				width: 25,
				height: 30,
			},
		]
		uniCloud.callFunction({
			name: 'qq-map',
			data: {
				from: Object.values(from).join(','),
				to: Object.values(to).join(','),
			},
			success: ({ result }) => {
				// 腾讯地图返回的数据
				const coords = result.result.routes[0].polyline
				const points = []
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				for (let i = 2; i < coords.length; i++) {
					coors[i] = Number(coords[i - 2]) + Number(coords[i]) / 1000000
				}
				for (let i = 0; i < coors.length; i + 2) {
					points.push({ latitude: coors[i], longitude: coors[i + 1] })
				}
				// 假设位置
				const current = points[100]
				// 地图中心点为运输车辆所在位置
				center.value = current

				// 标记运输车辆的位置
				markers.value.push({
					id: 3,
					latitude: current.latitude,
					longitude: current.longitude,
					iconPath: '/static/images/car.png',
					width: 50,
					height: 30,
				})

				polyline.value.push({
					points,
					color: '#16c2a3',
					width: 5,
				})
			},
			fail(error) {
				console.log(error)
			},
		})
	}
	getLogistics()
	function onBackClick() {
		uni.navigateBack({ delta: 1 })
	}
</script>
<template>
	<view class="timeline-page">
		<map
			:latitude="center.latitude"
			:longitude="center.longitude"
			:markers="markers"
			:polyline="polyline"
			class="uni-map"
			scale="13"
		>
		</map>
		<cover-view class="navigator-bar" :style="{ paddingTop: top }">
			<uni-icons type="left" size="22" @click="onBackClick"></uni-icons>
			<cover-view class="title"> {{ logisticsInfo.statusValue }} </cover-view>
		</cover-view>
		<cover-view class="timeline-meta">
			<cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
			<cover-view class="extra"
				>预计{{ logisticsInfo.estimatedTime }}送达 {{ logisticsInfo.name }}
				{{ logisticsInfo.awbNo }}</cover-view
			>
		</cover-view>
		<view class="timeline-detail">
			<view class="title"> 物流详情 </view>
			<view class="time-line">
				<view class="line">
					<view class="badge text">收</view>
					<view class="content">
						收货地址：广东省广州市大华区明离路科技园880号
					</view>
				</view>
				<view
					class="line"
					v-for="(item, index) in logisticsInfo.list"
					:key="item.id"
				>
					<view
						class="badge"
						:class="{ icon: item.status > 3, dot: item.status < 4 }"
					>
						<uni-icons
							type="icon-checked"
							size="14"
							color="#20c6b2"
							custom-prefix="iconfont"
							v-if="item.status > 3"
						></uni-icons>
					</view>

					<view class="info">
						<view>{{ item.statusValue }}</view>
						<view class="content">
							{{ item.content }}
						</view>
					</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.timeline-page {
		position: relative;
		padding-bottom: calc(env(safe-area-inset-bottom) + 60rpx);
		.uni-map {
			width: 100%;
			height: 470px;
		}
		.navigator-bar {
			position: absolute;
			top: 10px;
			left: 10px;
			right: 10px;
			height: 44px;
			display: flex;
			align-items: center;

			/* #ifdef APP */
			top: 25px;
			/* #endif */

			/* #ifdef MP-WEIXIN */
			height: 50px;
			top: 0;
			left: 0px;
			right: 0px;
			border-radius: 0;
			/* #endif */
			padding-left: 20rpx;
			border-radius: 4rpx;
			background-color: #fff;

			.title {
				position: absolute;
				top: 50%;
				left: 50%;
				font-size: 16px;
				transform: translate(-50%, -50%);
			}
		}
		.timeline-meta {
			position: absolute;
			top: 400px;
			left: 10px;
			right: 10px;
			padding: 20rpx 30rpx;
			background-color: #fff;
			.status {
				font-size: 15px;
				font-weight: 500;
				color: #121826;
			}
			.extra {
				margin-top: 10px;
				font-size: 14px;
				color: #6f6f6f;
			}
		}
		.timeline-detail {
			padding: 0 30rpx;
			.title {
				padding: 40rpx 0;
				line-height: 1;
				font-weight: 500;
				font-size: 30rpx;
				color: #121826;
			}
			.time-line {
				min-height: 300rpx;
				margin-left: 30rpx;
				margin-top: 20rpx;

				padding: 10rpx 60rpx 1rpx;
				border-left: 4rpx solid #16c2a3;
				.line {
					margin-bottom: 30rpx;
					position: relative;
					.badge {
						position: absolute;
						left: -92rpx;
						top: -10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						&.text {
							color: #2cb5a5;
							font-size: 24rpx;
							background-color: #eaf8f6;
						}
						&.icon {
							background-color: #f6f7f9;
						}

						&.dot::after {
							display: block;
							content: '';
							width: 24rpx;
							height: 24rpx;
							background-color: #16c2a3;
							border-radius: 50%;
						}
					}
					.label {
						margin-bottom: 10rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #6f6f6f;
					}
					.content {
						margin-bottom: 10rpx;
						color: #848484;
						font-size: 28rpx;
					}
					.time {
						font-size: 28rpx;
						font-weight: 500;
						color: #6f6f6f;
					}
				}
			}
		}
	}
</style>
